<template>
  <div class="bottom_box">
      <div class="bottom_item">
          <ul>
              <template v-for="(item,index) in bottom_nav_list">
                   <router-link :to="{name:'Classify',query:{photo_type_id:item.id,photo_type_name:item.name}}" tag="li"  :key="index">{{item.name}}</router-link>
              </template>
             
          </ul>
          
      </div>
      <div class="recommend_links">
          <ul>
              <li><a href="javascript:(void);">简书</a></li>
              <li><a href="javascript:(void);">CSDN</a></li>
              <li><a href="javascript:(void);">博客园</a></li>
              <li><a href="javascript:(void);">阿里云</a></li>
          </ul>
          <div class="bottom_result">
              <p>
                  @2010-2021 闽ICP备2151013475号-1 网站地图 联系QQ:2151013475
              </p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'bottom',
    data() {
        return {
            bottom_nav_list:[]
        }
    },
    mounted(){
        var url='https://realwds-api.vercel.app/360/getAllCategories'
        this.$axios.get(url)
        .then(res=>{
            // console.log(res.data.data.data);
            this.bottom_nav_list=res.data.data.data
        })
    }
    
}
</script>

<style scoped>
    .bottom_box{
        width: 100%;
        height: 350px;
        background: #262626;
        

    }
    .bottom_item{
        width: 1000px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
        
    }
    .bottom_item ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .bottom_item li{
        color: #fff;
        width: 200px;
        height: 40px;
        line-height: 40px;
        padding:0px 10px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }
    .bottom_item li:hover{
        background-color: #3e3e3e;
    }
    .recommend_links{
        width: 1000px;
        margin: 0 auto;
        padding: 0px 20px;
        box-sizing: border-box;
        border-top: 1px solid rgba(92, 91, 91,.1);
    }
    .recommend_links ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .recommend_links li{
        width: 200px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        padding:0px 10px;
    }
    .recommend_links li a{
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }
    .bottom_result{
        width: 500px;
        margin: 10px auto;
    }
    .bottom_result p{
        margin-top: 50px;
        font-size: 12px;
        color: #fff;
        text-align: center;
    }
</style>